<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Welcome!</title>
  <link rel="stylesheet" href="/css/index.css">
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
  <script src="/js/jquery-3.6.3.min.js"></script>
</head>
<body>
<!-- NAVBAR CREATION -->
<!-- <header class="header">
  <nav class="navbar">
    <a href="#">Home</a>
    <a href="#">Portfolio</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <a href="#">Help</a>
  </nav>
  <form action="" class="search-bar">
    <input type="text" placeholder="Search...">
    <button><i class='bx bx-search'></i></button>
  </form>
</header> -->
<!-- LOGIN FORM CREATION -->
<div class="background"></div>
<div class="container">
  <div class="item">
    <h2 class="logo"><i class='bx bxl-xing'></i> JPetStore</h2>
    <div class="text-item">
      <h2>Welcome! <br><span>
                    To our channel!
                </span></h2>
      <p>本后台管理系统是由本小组呕心沥血制作而成,请放心使用</p>
      <div class="social-icon">
        <a href="#"><i class='bx bxl-facebook'></i></a>
        <a href="#"><i class='bx bxl-twitter'></i></a>
        <a href="#"><i class='bx bxl-youtube'></i></a>
        <a href="#"><i class='bx bxl-instagram'></i></a>
        <a href="#"><i class='bx bxl-linkedin'></i></a>
      </div>
    </div>
  </div>
  <div class="login-section">
    <div class="form-box login">
      <form action="/accounts/index" method="post">
        <h2>登录</h2>
<!--        <div class="input-box">-->
<!--          <span class="icon"><i class='bx bxs-envelope'></i></span>-->
<!--          <input type="email" name="email" required>-->
<!--          <label >Email</label>-->
<!--        </div>-->
        <div class="input-box">
          <span class="icon"><i class='bx bxs-user'></i></span>
          <input name="username" type="text" required>
          <label >用户名</label>
        </div>
        <div class="input-box">
          <span class="icon"><i class='bx bxs-lock-alt' ></i></span>
          <input type="password" name="password" required>
          <label>密码</label>
        </div>
        <div class="remember-password">
<!--          <label for=""><input type="checkbox">我已阅读并同意<a href="#">使用协议</a></label>-->
<!--          <a href="#" th:text="${errorMsg}" class="errorMsg">忘记密码</a>-->
          <a href="#" class="login-phone-link">手机验证码登录</a>
          <p th:text="${errorMsg}" class="errorMsg"></p>
        </div>
        <button class="btn">Login In</button>
        <div class="create-account">
          <p>创建新账户? <a href="#" class="register-link">注册</a></p>
        </div>
      </form>
    </div>
    <div class="form-box register">
      <form action="/accounts/register" method="post">

        <h2>注册</h2>

        <div class="input-box">
          <span class="icon"><i class='bx bxs-user'></i></span>
          <input type="text" name="user_name" required>
          <label >用户名</label>
        </div>
        <div class="input-box">
          <span class="icon"><i class='bx bxs-envelope'></i></span>
          <input type="email" name="user_email" required>
          <label >Email</label>
        </div>
        <div class="input-box">
          <span class="icon"><i class='bx bxs-lock-alt' ></i></span>
          <input type="password" name="user_password" required>
          <label>密码</label>
        </div>
        <div class="remember-password">
          <label for=""><input type="checkbox">我已阅读并同意<a href="#">注册协议</a></label>
        </div>
        <button class="btn">Register</button>
        <div class="create-account">
          <p>已有账户? <a href="#" class="login-link">登录</a></p>
        </div>
      </form>
    </div>

    <div class="form-box login-phone">
      <form action="/accounts/index" method="get">
        <h2>手机登录</h2>

        <div class="input-box">
          <span class="icon"><i class='bx bxs-user'></i></span>
          <input type="text" name="user_phone" id="user-phone" required>
          <label >手机号码</label>
        </div>
        <div class="input-box">
          <span class="icon"><i class='bx bxs-envelope'></i></span>
          <input type="text" name="user_check" id="user_check" required>
          <label >验证码</label>
        </div>
        <div class="remember-password" style="align-content: center">
          <label for=""><a href="#" id="sendPhone">点击发送验证码</a></label>
          <p id="phone-Msg" class="errorMsg"></p>
          <p th:text="${loginMsg}" class="errorMsg"></p>
        </div>
        <button class="btn">Login In</button>
        <div class="create-account">
          <p>用户密码登录? <a href="#" class="phone-login-link">点击登录</a></p>
        </div>

      </form>
    </div>
  </div>
</div>
<!-- SIGN UP FORM CREATION -->

<script src="/js/newIndex.js"></script>
<script>

  $('#sendPhone').on('click',function (){
  //  TODO:首先校验电话号码栏是否为空（提示信息），不为空才可以调用ajax请求（/send）来发送验证码（已发送的提示信息）。
  //  TODO:无明确成功回调函数，若出错则提示请重试
    let phone = $('input[name=user_phone]').val(),
        arg   = {
          "phone" : phone
        };
    if (phone === null){
      $('#phone-Msg').text('请输入手机号!')
    } else {
      console.log("看这里!!!")
      console.log(phone);
      $.ajax({
        type    : "GET",
        url     : "send",
        data    : arg,
        success : function (data){
          console.log(data);
          alert('验证码发送成功!');
        },
        error   : function (errorMsg){
          console.log(errorMsg);
          alert('发送失败!');
          $('#phone-Msg').text('请稍后重发!');
        }
      })
    }
  })
</script>
</body>

</html>